<template>
  <div class="Home">
    <!-- 头部 -->
    <div class="title">
      <!-- 头——左 -->
      <div class="left">
        <img
          src="https://img1.baidu.com/it/u=592570905,1313515675&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1667494800&t=c3d8aa418bb59bbb86dafbf5c9b1768b"
          alt=""
        />

        <div class="name">
          <span>name，祝你开心每一天！</span>
          <span class="sm">智慧校园 | 班主任</span>
        </div>
      </div>
      <!-- 头-右 -->
      <div class="right">
        <div><span>未读通知</span><span>56</span></div>
        <div class="border"><span>待审核相册</span><span>16</span></div>
        <div><span>活跃排名</span><span>18/25</span></div>
      </div>
    </div>
    <!-- 第二长条 -->
    <div class="primary">
      <!-- 本单位信息 -->
      <div class="info">
        <div class="tit">本单位信息</div>
        <div class="logo_box">
          <div class="logo">logo</div>
          <div class="box">
            <div class="schoolname">智慧校园</div>
            <div class="address">所属区域:某某省某某市某某区</div>
          </div>
        </div>
      </div>
      <!-- 今日简报 -->
      <div class="briefing">
        <div class="tit">今日简报</div>
        <div class="num">
          <div class="att count">
            <span class="count_att">0</span>
            <span>出勤</span>
          </div>
          <div class="matter count">
            <span class="count_matter">0</span>
            <span>事假人数</span>
          </div>
          <div class="ill count">
            <span class="count_ill">0</span>
            <span>病假人数</span>
          </div>
        </div>
      </div>
      <!-- 快捷应用 -->
      <div class="app">
        <div class="tit">快捷应用</div>
        <div class="list">
          <div class="applist">
            <span class="img"></span>
            <span>发布通知</span>
          </div>
          <div class="applist">
            <span class="img"></span>
            <span>发起投票</span>
          </div>
          <div class="applist">
            <span class="img"></span>
            <span>学生请假</span>
          </div>
          <div class="applist">
            <span class="img"></span>
            <span>日常评价</span>
          </div>
          <div class="applist">
            <span class="img"></span>
            <span>学校相册</span>
          </div>
          <div class="applist">
            <span class="img"></span>
            <span>带药提醒</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三长条 -->
    <div class="footer">
      <!-- 消息统计 -->
      <div class="news">
        <div class="tit"><span>发布消息统计</span> <span>查看详情</span></div>
        <div class="newsstat">
          <echartVue></echartVue>
        </div>
      </div>
      <!-- 活跃排行榜 -->
      <div class="ranking">
        <div class="tit"><span>用户活跃排行榜</span> <span>查看详情</span></div>
        <div class="rankinglist">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="排名" width="100" />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="address" label="累计发布消息数量" />
          </el-table>
        </div>
      </div>
      <!-- 用户统计 -->
      <div class="userstat">
        <div class="tit"><span>用户统计</span></div>
        <div class="rankinglist">
          <div class="student">学生数量:</div>
          <div class="parent">家长数量:</div>
          <div class="parent">老师数量:</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import echartVue from '../../components/echart.vue';
</script>

<style lang="scss" scoped>
.Home {
  height: 630px;
  background-color: #f7f7f7;
}
.Home .title {
  height: 100px;
  background-color: #fff;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .left {
    display: flex;
    height: 100%;
    align-items: center;

    img {
      height: 50px;
      margin: 10px;
      border-radius: 50%;
    }
    .name {
      display: flex;
      flex-direction: column;
      span {
        padding: 10px 5px;
        font-size: 14px;
      }
      .sm {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .right {
    display: flex;
    div {
      line-height: 10px;
      display: flex;
      flex-direction: column;
      text-align: center;
      span {
        margin: 10px;
      }
    }
    .border {
      border-left: 1px solid #999;
      border-right: 1px solid #999;
      padding: 0 20px;
      margin: 0 20px;
    }
  }
}
// 第二条
.primary {
  height: 120px;
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
  .tit {
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-bottom: 2px solid #f4f4f4;
  }
  .info {
    flex: 1;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    .logo_box {
      height: 90px;
      display: flex;
      align-items: center;
      .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background-color: pink;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        color: #fff;
        margin: 10px;
      }
      .box {
        font-size: 12px;
        div {
          padding: 10px 0;
        }
      }
    }
  }
  .briefing {
    flex: 1;
    height: 100%;
    background-color: #fff;
    margin-left: 20px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    .num {
      height: 90px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .count {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 12px;
      }
      .count_att {
        color: #5fb741;
        font-weight: bold;
        font-size: 16px;
      }
      .count_matter {
        color: #fe8f5d;
        font-weight: bold;
        font-size: 16px;
      }
      .count_ill {
        color: #e13131;
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  .app {
    box-sizing: border-box;
    flex: 2;
    height: 100%;
    margin-left: 20px;
    background-color: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    .list {
      height: 90px;
      padding: 0 40px;
      display: flex;
      align-items: center;
      .applist {
        margin: 0 20px;
        font-size: 12px;
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .img {
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: green;
          margin-bottom: 10px;
        }
      }
    }
  }
}
// 底部
.footer {
  display: flex;
  justify-content: space-between;
  .tit {
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-bottom: 2px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
  }
  .news {
    flex: 2;
    margin-right: 20px;
    background-color: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    .newsstat {
      height: 300px;
    }
  }
  .ranking {
    flex: 1;
    background-color: #fff;
    margin-right: 20px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  }
  .userstat {
    flex: 1;
    background-color: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    .rankinglist {
      padding: 10px;
      div {
        margin: auto;
        height: 70px;
        margin: 15px;
        line-height: 70px;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 12px;
        width: 90%;
        border-radius: 10px;
        &:nth-child(1) {
          background-color: #f1f7fe;
          color: #599fff;
        }
        &:nth-child(2) {
          background-color: #fdf5f2;
          color: #fe8f5d;
        }
        &:nth-child(3) {
          background-color: #f1f7ea;
          color: #5fb741;
        }
      }
    }
  }
}
</style>